<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<!--
    FileReader 对象可以从文件或 blob 中读取数据，可以读取为以下三种格式：
    字符串（readAsText）。
    ArrayBuffer（readAsArrayBuffer）。
    data url，base-64 编码（readAsDataURL）。

    “但是，在很多情况下，我们不必读取文件内容”。就像我们处理 blob 一样，我们可以使用 URL.createObjectURL(file) 创建一个短的 url，
    并将其赋给 <a> 或 <img>。这样，文件便可以下载文件或者将其呈现为图像，作为 canvas 等的一部分。
    而且，如果我们要通过网络发送一个 File，那也很容易：像 XMLHttpRequest 或 fetch 等网络 API 本身就接受 File 对象。
   -->

		<input type="file" onchange="showFile(this)" />

		<img src="" alt="" />

		<script>
			function showFile(input) {
				let file = input.files[0] // 输入（input）可以选择多个文件，因此 input.files 是一个类数组对象。
				let img = document.querySelector('img')

				console.log('createObjectURL：', URL.createObjectURL(file))
				img.src = URL.createObjectURL(file)

				// alert(`文件名：${file.name}`)
				// alert(`最后一次修改的时间戳：${file.lastModified}`)
			}
		</script>
	</body>
</html>
